<template>
  <div>
    <!----------------------------模糊查询表单------------------->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="登录名">
        <el-input v-model="formInline.loginName" placeholder="请输入登录名"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="formInline.tel" placeholder="请输入电话"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="initData()">查询</el-button>
      </el-form-item>
    </el-form>

    <!--添加和导出数据的按钮-->
    <el-button type="primary" @click="insertFrmDia=true">添加</el-button>
    <el-button type="primary" @click="daochu()">导出用户数据</el-button>



    <!--------------------------------列表展示的用户数据---------------------------------->
    <el-table :data="userList" stripe style="width: 100%">
      <el-table-column prop="id" label="用户ID" width="180">
      </el-table-column>
      <el-table-column prop="createTime" label="日期" width="180">
      </el-table-column>
      <!--<el-table-column prop="userName" label="用户名" width="180">
      </el-table-column>-->
      <el-table-column prop="userName" label="姓名" width="180">

        <template slot-scope="scope">
          <el-popover trigger="hover" >
            <p> <img :src="scope.row.img" width="50px" height="50px"></p>
            <p>用户名: {{ scope.row.userName }}</p>
            <p>登录名: {{ scope.row.loginName }}</p>
            <p>联系电话: {{ scope.row.tel }}</p>
            <p>活动状态:
              <el-tag type="danger" v-if="scope.row.version==0">冻结</el-tag>
              <el-tag type="success"  v-if="scope.row.version==1">激活</el-tag>
            </p>
            <p>拥有角色: {{ scope.row.rolename }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.userName }}</el-tag>
            </div>
          </el-popover>
        </template>

      </el-table-column>
      <el-table-column prop="loginName" label="登录名">
      </el-table-column>
      <el-table-column prop="tel" label="手机号">
      </el-table-column>
      <el-table-column prop="version" label="状态">

        <template slot-scope="scope">
          <el-button  size="mini"  plain   type="primary"   v-if="scope.row.version==1"  @click="changerStatus(scope.row)">激活</el-button>
          <el-button   size="mini" plain  type="danger"   v-if="scope.row.version==0"  @click="changerStatus(scope.row)">冻结</el-button>
        </template>
      </el-table-column>

      <el-table-column width="360" prop="id" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="roBindRole(scope.row)">编辑绑定角色</el-button>
          <el-button size="mini" type="primary" @click="setDocData(scope.row)">导出DOC</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!-----------------------------------------------分页-------------------------------------->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
                   :page-sizes="sizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!--绑定角色的 用户数据的回显-->
    <el-dialog title="为用户绑定角色" :visible.sync="dialogVisible" width="40%">
      <div style="text-align: left">
        <span>当前用户是：{{userName}}</span>
        <span>&nbsp用户ID是：{{userId}}</span>
      </div>
      <br>
      <div style="text-align: left;">

        <!--角色的动态模糊查询-->
        <el-select style="width: 80%" v-model="value" multiple filterable remote reserve-keyword placeholder="请输入角色名称关键字"
                   :remote-method="remoteMethod" :loading="loading">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

        <el-button style="margin-left: 20px" type="primary" @click="getSelectedRole">确 定</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>

    </el-dialog>


    <!--添加用户的对话框-->
    <el-dialog title="添加用户" :visible.sync="insertFrmDia">

      <el-form :model="insertFrm">

        <el-upload
          class="avatar-uploader"
          action="http://localhost:10000/user/user/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

        <el-form-item label="用户名称">
          <el-input v-model="insertFrm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录名">
          <el-input v-model="insertFrm.loginName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="insertFrm.passWord" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="insertFrm.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="insertFrm.email" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insertFrmDia = false">取 消</el-button>
        <el-button type="primary" @click="submitFrm()">确 定</el-button>
      </div>
    </el-dialog>





  </div>
</template>

<script>
  export default {
    name: "userList",
    data() {
      return {
        dialogVisible: false,
        userList: [],
        userName: "",
        userId: "",
        options: [],
        value: [],
        list: [],
        loading: false,
        states: [],
        total: 0,
        size: 5,
        sizes: [5, 8, 10],
        current: 1,
        formInline: {
          userName:'',
          loginName:'',
          tel:''
        },
        insertFrmDia:false,
        insertFrm:{},
        imageUrl:'',




      }
    },
    created() {
      this.initData();
    },
    methods: {
      /*初始化user列表数据*/
      initData() {
        this.$axios.get(this.$gloableData.serverPath+"user/user/userlist?current="+this.current+"&size="+this.size, {
          params:{
            userName:this.formInline.userName,
            loginName:this.formInline.loginName,
            tel:this.formInline.tel
          }
        }).then((response) => {
          //获取数据
          this.$data.userList = response.data.result.records;
          this.$data.size = response.data.result.size;
          this.$data.current = response.data.result.current;
          this.$data.total = response.data.result.total;
        }).catch((error) => {

        })
      },
      /*分页展示函数的的改变*/
      handleSizeChange(val) {
        this.size = val
        this.initData();
      },
      /*分页当前页的改变*/
      handleCurrentChange(val) {
        this.current = val;
        this.initData();
      },
      /*根据用户名绑定角色*/
      roBindRole(row) {
        this.userName = row.userName;//用户名
        this.userId = row.id;//用户名id
        let bids=row.bids;
        console.log(bids);

        let arr=bids.split(",");
        console.log(arr);
        for(let i=0;i<arr.length;i++){
          if(isNaN(arr[i])){
            this.value.push(parseInt(arr[i]))
          }
        }
        //打开对话窗
        this.dialogVisible = true;
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.$axios.get(this.$gloableData.serverPath + "user/role/rolelist", {
              params:{
                roleName: query
              }
            }).then((response) => {
              this.options = response.data.result;
              this.loading = false;
            }).catch((error) => {
              this.loading = false;

            })
          }, 200);
        } else {
          this.options = [];
        }
      },
      getSelectedRole() {

        //给用户绑定角色信息
        this.$axios.post(this.$gloableData.serverPath + "user/service/user/bindRoleForUser", {
          userId: this.userId,
          roleIds: this.value

        }).then((response) => {
          //获取数据
          if (response.data.code == 0) {
            this.$message({
              message: '操作成功！',
              type: 'success'
            });
            //
            this.value = [];
            this.list = [];
            this.states = [];
            this.options = [];
            //
            this.dialogVisible = false;
          }

        }).catch((error) => {

        })
      },
      openInsertFrmDia(){
        insertFrmDia=true;
      },
      submitFrm(){
        this.$axios.post(this.$gloableData.serverPath+"user/user/userinsert",this.insertFrm).then((response)=>{
          alert(this.insertFrm);
          if(response){
            this.initData();
            this.$message({
              message: '恭喜你，添加用户信息成功',
              type: 'success'
            });
          }else {
            this.$message({
              message: '警告哦，添加用户信息失败',
              type: 'warning'
            });
          }
        })
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.insertFrm.img=res;
      },
      daochu(){
        this.$axios.post(this.$gloableData.serverPath+"user/user/").then((response)=>{
          if(response){

            this.$message({
              message: '恭喜你，添加用户信息成功',
              type: 'success'
            });
          }else {
            this.$message({
              message: '警告哦，添加用户信息失败',
              type: 'warning'
            });
          }
        })

      },
      setDocData(row){
        this.addUser=row;
        alert(JSON.stringify(row));
        this.$axios.post(this.$gloableData.serverPath+"user/user/getDoc",this.addUser).then((response)=>{
          if(response.data){
            this.$message({
              message: '恭喜你，导出成功',
              type: 'success'
            });
          }else{
            this.$message({
              message: '警告哦，导出失败',
              type: 'warning'
            });
          }

        });
      },
      changerStatus(row){

        this.$axios.get(this.$gloableData.serverPath+"user/user/changerStatus",{
          params:{
            sid:row.id,
            status:row.version
          }
        }).then((response)=>{
          if (response){
            console.log("激活成功!")
            this.initData();
          }else {
            console.log("激活失败!")
          }
        })
      }








    }

  }
</script>

<style>
  .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    float: left;
  }

  /*上传图片的样式*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
